<!doctype html>
<html lang="en">

<head>

    <!-- Basic Page Needs
    ================================================== -->
    <title>TubeLite Streaming Video HTML Template</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="TubeLite is - Professional A unique and beautiful collection of UI elements">
    <link rel="icon" href="assets/images/favicon.png">

    <!-- CSS 
    ================================================== -->
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/night-mode.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/uikit/3.2.1/css/uikit.min.css">

    <!-- icons
    ================================================== -->
    <link rel="stylesheet" href="assets/css/icons.css">

    <!-- Google font
    ================================================== -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">


</head>

<body>

    <!-- Wrapper -->
    <div id="wrapper">

        <!-- sidebar -->
        <div class="main_sidebar">
            <div class="side-overlay" uk-toggle="target: #wrapper ; cls: collapse-sidebar mobile-visible"></div>

            <!-- sidebar header -->
            <div class="sidebar-header">
                <h4> 导航</h4>
                <span class="btn-close" uk-toggle="target: #wrapper ; cls: collapse-sidebar mobile-visible"></span>
            </div>

            <!-- sidebar Menu -->
            <div class="sidebar">
                <div class="sidebar_innr" data-simplebar>

                    <div class="sections">
                        <h3> 浏览 </h3>
                        <ul>
                            <li class="active"> <a href="home.html"> <i class="uil-home-alt"></i> <span> 主页 </span> </a></li>
                            <li> <a href="your-watch-later.html"> 
                                <i class="uil-users-alt"></i> <span> 电影列表 </span> </a></li>

                        </ul>
                    </div>
                </div>
            </div>

			<div id="foot">

				<ul>
					<li> <a href="page-setting.html"> Setting </a></li>
				</ul>
			</div>

        </div>

        <!-- header -->
        <div id="main_header">
            <header>

                <!-- Logo-->
                <i class="header-traiger uil-bars"
                    uk-toggle="target: #wrapper ; cls: collapse-sidebar mobile-visible"></i>

                <!-- Logo-->
                <div id="logo">
                    <a href="#"> <img src="assets/images/logo.png" alt=""></a>
                    <a href="#"> <img src="assets/images/logo-light.png" class="logo-inverse" alt=""></a>
                </div>

                <!-- form search-->
 

                <!-- user icons -->
                <div class="head_user">
<span></span>

                    <!-- upload dropdown box -->
                    


                    <!-- profile -image -->
                    <a class="opts_account"> <img src="assets/images/avatars/avatar-1.jpg" alt=""></a>

                    <!-- profile dropdown-->
                    <div uk-dropdown="pos: top-right;mode:click ; animation: uk-animation-slide-bottom-small"
                        class="dropdown-notifications small">

                        <!-- User Name / Avatar -->
             

                        <!-- User menu -->

                        <ul class="dropdown-user-menu">
                         
                            <li>
                                <a href="#" id="night-mode" class="btn-night-mode">
                                    <i class="icon-feather-moon"></i> 模式切换
                                    <span class="btn-night-mode-switch">
                                        <span class="uk-switch-button"></span>
                                    </span>
                                </a>
                            </li>
							<li><a href="page-setting.html"> <i class="uil-cog"></i>个人信息</a></li>
                            <div class="menu-divider">
                              
                               <li><a href="form-modern-login.html"> <i class="icon-feather-log-out"></i> 登出</a>
                                </li>
                        </ul>


                    </div>

                </div>

            </header>

        </div>


        <!-- contents -->
        <div class="main_content">

            <div class="main_content_inner">


                <!-- Slideshow -->
                <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1"
                    uk-slideshow="animation: push ;min-height: 200; max-height: 350 ;autoplay: t rue">

                    <ul class="uk-slideshow-items rounded">
                        <li>
                            <div class="uk-position-cover" uk-slideshow-parallax="scale: 1.2,1.2,1">
                                <img src="assets/images/gangtiexia.png" alt="" uk-cover>
                            </div>
                            <div class="uk-position-cover"
                                uk-slideshow-parallax="opacity: 0,0,0.2; backgroundColor: #000,#000"></div>
                            <div class="uk-position-bottom-left bg-gradient-4 uk-width-1-1 p-4">
                                <div uk-slideshow-parallax="scale: 1,1,0.8">
                                    <h1 uk-slideshow-parallax="x: 200,0,0" class="uk-heading-small"> 钢铁侠
                                    </h1>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="uk-position-cover" uk-slideshow-parallax="scale: 1.2,1.2,1">
                                <img src="assets/images/zzx1.jpg" alt="" uk-cover>
                            </div>
                            <div class="uk-position-cover"
                                uk-slideshow-parallax="opacity: 0,0,0.2; backgroundColor: #000,#000"></div>
                            <div class="uk-position-bottom uk-position-medium uk-transition-scale-down">
                                <h1 uk-slideshow-parallax="x: 200,0,0" class="uk-heading-small">蜘蛛侠</h1>
                            </div>
                        </li>
                    </ul>

                    <a class="uk-position-center-left-out uk-position-small uk-hidden-hover slidenav-prev" href="#"
                        uk-slideshow-item="previous"></a>
                    <a class="uk-position-center-right-out uk-position-small uk-hidden-hover slidenav-next" href="#"
                        uk-slideshow-item="next"></a>



                </div>
				<nav class="responsive-tab">
				    <ul>
				        <li class="uk-active"><a href="#"> <i class="uil-video"></i> 分类 </a></li>
				    </ul>
				</nav>

  <div class="section-small">
                    <div class="uk-child-width-1-4@m uk-child-width-1-3@s typeList" uk-grid>
                       
                            
                    </div>
                </div>


                <!-- Videos sliders 1 -->

                <div class="video-grid-slider mt-4" uk-slider="finite: true">

                    <div class="grid-slider-header">
                        <div>
                            <h3> 热门电影 </h3>
                          
                        </div>
                        <div class="grid-slider-header-link">

                            <div class="btn-arrow-slider">
                                <a href="#" class="btn-arrow-slides" uk-slider-item="previous">
                                    <span class="arrow-left"></span>
                                </a>
                                <a href="#" class="btn-arrow-slides" uk-slider-item="next">
                                    <span class="arrow-right"></span>
                                </a>
                            </div>

                        </div>
                    </div>

                    <ul class="uk-slider-items uk-child-width-1-4@m uk-child-width-1-3@s uk-grid">

                       

                    

                    </ul>

                </div>


                <!-- section header for slider 1 -->

       

 

                </div>

                <!-- footer
               ================================================== -->
                <div class="footer">
                    <div class="uk-grid-collapse" uk-grid>
                        <div class="uk-width-expand@s uk-first-column">
                            <p>© 2020 <strong>TubeLite</strong>. All Rights Reserved. </p>
                        </div>
                        <div class="uk-width-auto@s">
                            <nav class="footer-nav-icon">
                                <ul>
                                    <li><a href="#"><i class="icon-brand-facebook"></i></a></li>
                                    <li><a href="#"><i class="icon-brand-dribbble"></i></a></li>
                                    <li><a href="#"><i class="icon-brand-youtube"></i></a></li>
                                    <li><a href="#"><i class="icon-brand-twitter"></i></a></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>


    <!-- For Night mode -->
    <script>
        (function (window, document, undefined) {
            'use strict';
            if (!('localStorage' in window)) return;
            var nightMode = localStorage.getItem('gmtNightMode');
            if (nightMode) {
                document.documentElement.className += ' night-mode';
            }
        })(window, document);


        (function (window, document, undefined) {

            'use strict';

            // Feature test
            if (!('localStorage' in window)) return;

            // Get our newly insert toggle
            var nightMode = document.querySelector('#night-mode');
            if (!nightMode) return;

            // When clicked, toggle night mode on or off
            nightMode.addEventListener('click', function (event) {
                event.preventDefault();
                document.documentElement.classList.toggle('night-mode');
                if (document.documentElement.classList.contains('night-mode')) {
                    localStorage.setItem('gmtNightMode', true);
                    return;
                }
                localStorage.removeItem('gmtNightMode');
            }, false);

        })(window, document);
    </script>


    <!-- javaScripts
                ================================================== -->
    <script src="https://cdn.bootcdn.net/ajax/libs/uikit/3.2.1/js/uikit.min.js"></script>
    <script src="assets/js/jquery-3.3.1.min.js"></script>
    <script src="assets/js/simplebar.js"></script>
    <script src="assets/js/main.js"></script>
    <script src="assets/js/public.js"></script>
        <script>

	       
			$.ajax({
				url:apiurl+'tVideo/getHotMovie',
				type:'get',
				success:function(data){
					var html = "";
					for(var i = 0 ; i<data.data.length ; i++){
						
						html+="<li id="+data.data[i].videoId+">";
						html+="<a href='single-video.html?modieId="+data.data[i].videoId+"' class='video-post'>";
						html+="<div class='video-post-thumbnail'>";
						html+="<span class='video-post-count'>"+data.data[i].playCount+"</span>";
						html+="<span class='video-post-time'>"+data.data[i].videoTime+"</span>";
						html+="<span class='play-btn-trigger'></span>";
						html+="<img src="+imgurl+data.data[i].videoCover+" alt=''>";
						html+="</div>";
						html+="<div class='video-post-content'>";
						html+="<h3>"+data.data[i].videoTitle+"</h3>";
						// html+="<span class='video-post-views'><h>播放量: </h>"+data.data[i].playCount/1000+"K</span>&nbsp;&nbsp;";
						html+="<span class='video-post-date'>"+data.data[i].createTime+"</span>";
						html+="</div>";
						html+="</a>";
						html+="</li>";		
					}
					$(".uk-slider-items").append(html)	
					}	,
						})
				
						$.ajax({
							url:apiurl+'tVideoType/selectAll',
							type:'get',
							success:function(data){
								var html = "";
								for(var i = 0 ; i<data.data.length ; i++){
									
									html+="<div id="+data.data[i].vtId+">";
									html+="<a href=typelist.html?typeId="+data.data[i].vtId+">";
									html+=" <div class='catagroy-card animate-this' data-src="+imgurl+data.data[i].vtImg+" uk-img>";
									html+="<div class='catagroy-card-content'>";
									html+=" <h4>"+data.data[i].vtName+"</h4>";
					                html+="</div>";
					                html+="</div>";

									html+="<a>";
									html+="</div>";	
								}
								$(".typeList").append(html)	
								}	,
									})

				
		
		</script>
</body>

</html>